<template>
    <div>
        <!-- 头部 -->
        <van-row class="head">
            &nbsp;
            <van-row style="margin-top: 1rem;"> 
                <van-col span="2" >
                    <van-icon name="arrow-left" @click="exit" />
                </van-col>
                
            </van-row>
            <van-row >
                <van-col span="8" offset="8">
                    充值页面
                </van-col>
            </van-row>
            <van-row style="margin-top: 2rem;">
                <van-col span="8" offset="2">
                    账户余额（元）
                </van-col>
            </van-row>
            <van-row style="margin-top: 1rem;">
                <van-col  span="8" offset="2">
                    {{ this.userMoney }}
                </van-col>
            </van-row>
            <van-row style="margin-top: 1rem;margin-bottom: 1rem;">
                <van-col  span="4" offset="18"  @click="rechargeRecord">
                    <span>充值记录</span> 
                </van-col>
               
            </van-row>
            
        </van-row>

        <van-row style="margin-top: 1rem; margin-bottom: 1rem;">
            <van-col span="6" offset="2">
                选择充值金额
            </van-col>
        </van-row>
        <van-row style="margin-top: 1rem; margin-bottom: 1rem;">
            <van-col span="16" offset="2" >
                <van-radio-group v-model="radio">
                    <van-row class="topbottoom">
                        <van-col span="9" offset="3">
                            <van-radio name="1" >
                                充值100元
                            </van-radio>
                        </van-col>
                        <van-col span="9" offset="3">
                            <van-radio name="2" >
                                充值200元
                            </van-radio>
                        </van-col>
                    </van-row>
                    <van-row class="topbottom">
                        <van-col span="9" offset="3">
                            <van-radio name="3" >
                                充值500元
                            </van-radio>
                        </van-col>
                        <van-col span="9" offset="3">
                            <van-radio name="4" >
                                充值800元
                            </van-radio>
                        </van-col>
                    </van-row>
                </van-radio-group>


            </van-col>
        </van-row>
        <!-- 底部按钮 -->
        <van-row>
            <van-col>
                <van-goods-action>
                    <van-goods-action-button
                        type="danger"
                        text="立即充值"
                        @click="onClickButton"
                    />
                </van-goods-action>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import { RadioGroup, Radio, Toast } from 'vant';
import {getUserMoney,addUserMoney,addChangeMoney} from '@/api/index'
    export default {
        data() {
            return {
                radio: 1,
                userMoney:0,
                upmoney:0,
                m:{},//用户传递给后端的对象
            };
        },
        methods:{
            exit(){
                this.$router.push('/my')
            },
            onClickButton(){
                if(this.radio==1)
                    this.upmoney=100;
                else if(this.radio==2)
                    this.upmoney=200;
                else if(this.radio==3)
                    this.upmoney=500;
                else if(this.radio==4)
                    this.upmoney=800;
               
                this.m["username"]=localStorage.getItem("username")
                this.m["upmoney"]=this.upmoney
                addUserMoney(this.m).then(res=>{
                    if(res.data.data){
                        this.userMoney=this.userMoney+this.upmoney
                        this.addChangeMoney1()
                        Toast("充值成功")
                    }else 
                        Toast("充值失败")
                })
            },
            // 跳转到充值记录页面
            rechargeRecord(){
                this.$router.push('/reRecord')
            },
            // 获得余额
            getUserMoney1(){
                getUserMoney(localStorage.getItem("username")).then(res=>{
                    this.userMoney=res.data.data
                })
            },
            //添加到订单记录

            addChangeMoney1(){
                let con={}
                con["username"]=localStorage.getItem("username")
                con["addmoney"]=this.upmoney
                addChangeMoney(con).then(res=>{
                    
                })
            }
        },
        mounted(){
            this.getUserMoney1()
        }
    }
</script>
<style>
    .head{
        background-color: azure;
    }
    .topbottom{
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
</style>